<script setup>
import { defineProps, ref, onMounted, onBeforeMount } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  tableConfig: {
    type: Array,
    default: () => [],
  },
  tableStripe: {
    type: Boolean,
    default: false,
  },
  tableSortable: {
    type: Boolean,
    default: false,
  },
  tableRowColors: {
    type: Array,
    default: () => [],
  },
  tableScrollInterval: {
    type: Number,
    default: 1000,
  },
  tableRowStyle: {
    type: Object,
    default: () => {},
  },
  tableHeadStyle: {
    type: Object,
    default: () => {},
  },
})
let tr_data = ref([...props.tableData])
let tr_color = ref([...props.tableRowColors])
onBeforeMount(() => {})
const scrollContainer = ref(null)
onMounted(() => {
  // 动态设置 CSS 变量
  const root = document.documentElement
  root.style.setProperty('--vt_color1', tr_color.value[0])
  root.style.setProperty('--vt_color2', tr_color.value[1])
  root.style.setProperty('--vt_interval', props.tableScrollInterval + 'ms')
  root.style.setProperty('--vt_fontsize', props.tableRowStyle.fontSize)

  const scrollBody = scrollContainer.value.$el.children[2].children[0].children[0].children[2]

  setInterval(() => {
    tr_color.value.push(tr_color.value.shift())
    root.style.setProperty('--vt_color1', tr_color.value[0])
    root.style.setProperty('--vt_color2', tr_color.value[1])
    let tc_shift = tr_data.value.shift()
    tr_data.value.push(tc_shift)
    // 强制刷新 vxe-table 数据,这是由于 Vue 的响应式机制和 vxe-table 的特殊行为导致的。
    if (scrollContainer.value) {
      scrollContainer.value.reloadData(tr_data.value)
    }

    if (scrollBody) {
      scrollBody.scrollTop += scrollBody.clientHeight / props.tableData.length / 2 // 向上滚动一小段距离
      if (scrollBody.scrollTop >= scrollBody.scrollHeight - scrollBody.clientHeight) {
        scrollBody.scrollTop = 0 // 滚动到底部时重置
      }
    }
  }, props.tableScrollInterval)
})
</script>

<template>
  <vxe-table
    :data="tr_data"
    ref="scrollContainer"
    :stripe="props.tableStripe"
    :row-style="props.tableRowStyle"
    :header-row-style="tableHeadStyle"
    :cell-config="{ height: props.tableRowStyle.height }"
  >
    <vxe-column
      v-for="item in tableConfig"
      :key="item"
      :field="item.prop"
      :title="item.label"
      :sortable="tableSortable"
    ></vxe-column>
    <!-- <el-table-column prop="name" label="名称" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="city" label="城市" /> -->
  </vxe-table>
</template>
n
<style lang="scss" scoped>
:deep(.vxe-body--row) {
  background-color: var(--vt_color1);
}
:deep(.vxe-body--row .vxe-body--column .vxe-cell) {
  height: var(--vt_fontsize);
  line-height: var(--vt_fontsize);
  padding: 0;
}
:deep(.row--stripe) {
  background-color: var(--vt_color2) !important;
}
.el-table {
  width: 100%;
  height: 100%;
  // transition: all var(--vt_interval);
}
</style>
